<template>
	<view class="container"> 
	<scroll-view class="list-scroll-content" scroll-y="true" @scrolltolower="loadData" style="height: 600px;">
		<view class="body" v-if="dataList.length>0">
			
			<view class="recommend" v-if="puser.user_id>0">
				<view class="recommend-box">
					<view class="recommend-head"><image :src="puser.head_img  || '/static/missing-face.png'" class="recommend-img"></image></view>
					<view class="recommend-text">{{puser.user_name}}(<text style="color: red;">推荐人</text>)</view>
				</view>
			</view>
			<view class="fans-top">
				<text>我的直推</text>
			</view>
			<view class="fans-list">
				<view class="fans-item" v-for="(item,index) in dataList" :key="index">
					<image :src="item.head_img || '/static/missing-face.png'" class="fans-image" mode="aspectFill"></image>
					<view class="fans-item-box">
						<view class="fans-item-name-time">
							<text >{{item.user_name}}</text>
							<text class="fans-item-time">{{item.create_time}}</text>
						</view>
						<view class="fans-item-number">
							<text class="fans-item-number-key">{{item.child_num}}</text>
							<text>个</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState 
    } from 'vuex';  
    export default {
		components: {
			listCell
		},
		data(){
			return {
				dataList:[],
				puser:{user_id:0,user_name:""}
			}
		},
		onLoad(){
			
		},
		onShow() {
			this.loadData()
		},
        computed: {
			
		},
        methods: {

			async loadData(){
				var _this=this
				this.$http.sendRequest({
					url:"api/member/getTeam",
					method:"GET",
					success:function(res){
						_this.dataList=res.data.data.list;
						_this.puser=res.data.data.puser;
					}
				})
			},
        }  
    }  
</script>  

<style lang='scss'>
	.container{
		background: #F7F7F7;
		padding-top: 20upx;
		.body{
			.fans-top{
				padding:5rpx 40rpx 10rpx 40rpx;
				font-size: 28upx;
				border-bottom: 1upx solid #F3F0F5;
				.fans-data{
					float: right;
				}
			}
			.recommend{
				margin:30upx;
				font-size: 28upx;
				border-bottom: 1upx solid #F3F0F5;
				display: flex;
				line-height: 100rpx;
				height: 100rpx;
				background-color: #FFFFFF;
				padding-left: 20rpx;
				padding-right: 20rpx;
				.recommend-box{
					width: 50%;
					height: 100rpx;
					line-height: 90rpx;
					.recommend-head{
						display: inline-block;
						width: 80rpx;
						height: 80rpx;
						vertical-align: middle;
						overflow: hidden;
						border-radius: 80rpx;
						.recommend-img{
							width: 100%;
							height: 100%;
						}
					}
					.recommend-text{
						display: inline-block;
						vertical-align: middle;
						margin-left: 10rpx;
					}
					
				}
				.recommend-contact{
					width: 50%;
					text-align: right;
					text{
						padding: 10rpx;
						background-color: blue;
						color: #ffffff;
						font-size: 20rpx;
						border-radius: 10rpx;
					}
				}
				
			}
			.fans-list{
				.fans-item{
					height: 160upx;
					display: flex;
					padding: 30upx;
					background-color: #ffffff;
					margin-left: 20rpx;
					margin-right: 20rpx;

					.fans-image{
						width: 120upx;
						height: 120upx;
						border-radius: 120upx;
					}
					.fans-item-box{
						border-bottom: 1upx solid #F3F0F5;
						width: 570upx;
						height: 140upx;
						line-height: 44upx;
						margin-left: 20upx;
						display: flex;
						.fans-item-name-time{
							
							width: 320upx;
							.fans-item-time{
								margin-top: 26rpx;

								font-size: 26upx;
								color: #999999;
								display: block;
							}
						}						
						.fans-item-number{
							float: right;
							line-height: 100upx;
							.fans-item-number-key{
								font-weight: 600;
								margin-right: 10upx;
							}
							.recommend-contact{
								display: inline-block;
								margin-left: 50rpx;
								text{
									padding: 10rpx;
									background-color: blue;
									color: #ffffff;
									font-size: 20rpx;
									border-radius: 10rpx;
								}
							}
						}
					}
					
				}
			}
		}
	}
</style>
